<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>bulma|vue kanban</title>

  <link rel='stylesheet prefetch' href='https://unpkg.com/buefy/dist/buefy.min.css'>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  <link rel="stylesheet" href="../css/kanban.css">

</head>

<body>
  <div id="app">
    <nav class="navbar has-shadow">
      <div class="container">
        <div class="navbar-brand"><a class="navbar-item" href="../">
            <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" /></a>
        </div>
      </div>
    </nav>
    <section class="hero is-info">
      <div class="hero-body">
        <div class="container">
          <div class="card">
            <div class="card-content">
              <div class="content">
                <div class="control has-icons-left has-icons-right search-field">
                  <input class="input is-large" type="text" placeholder="" v-model="search" /><span class="icon is-medium is-left"><i
                      class="fa fa-search"></i></span>
                  <span class="icon is-medium is-right">
                    <i class="delete is-medium clear-search" @click="clearSearchField()" v-if="search.length"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="box cta">
      <section>
        <div class="field">
          <b-switch v-model="isSwitchedCustom" @input="isSwitched = ! isSwitched" true-value="Pleasant feelings"
            false-value="Difficult/Unpleasant feelings">
            {{ isSwitchedCustom }}
          </b-switch>
        </div>
      </section>
    </div>
    <!-- Loop through the parent array -->
    <section class="container cards-container" v-if="isSwitched">
      <div class="columns is-centered is-multiline" id="sectioncontainer">
        <div class="column is-narrow" v-for="yxy in filteredCards">
          <article class="message" :class="'is-' + yxy.cardColor">
            <div class="message-header">
              <!-- Make a header using the `name` property from the current season in the loop -->
              <p>{{ yxy.name }}</p>
              <button class="delete" aria-label="delete" @click="removeCard(yxy)"></button>
            </div>
            <div class="message-body">
              <div class="board-item">
                <!-- Loop through the `items` array from the current season to show each item -->
                <div class="board-item-content" v-for="item in yxy.items"><span>{{ item }}</span></div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section v-else>
      <div class="columns is-centered is-multiline" id="sectioncontainer">
        <div class="column is-narrow" v-for="yxy in filteredCards">
          <article class="message" :class="'is-' + yxy.cardColor">
            <div class="message-header">
              <!-- Make a header using the `name` property from the current season in the loop -->
              <p>{{ yxy.name }}</p>
              <button class="delete" aria-label="delete" @click="removeCard(yxy)"></button>
            </div>
            <div class="message-body">
              <div class="board-item">
                <!-- Loop through the `items` array from the current season to show each item -->
                <div class="board-item-content" v-for="item in yxy.items"><span>{{ item }}</span></div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>


  </div>
  <footer>
    <div class="box cta">

    </div>
  </footer>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js'></script>
  <script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
  <script src="../js/kanban-switch.js"></script>
</body>

</html>
